<template>
  <div class="position-main game-trade-transfer">
    <div class="check-box" @click.stop="clickCheckBox">
			<span class="suc-order">
	            <span class="comm-checkbox" ref="checkBox">
	                <i :class="{'iconfont':true,'icon-checkbox':true,'icon-checkbox2':isYc=='1'}"></i>
	            </span> 只看已成订单
			</span>
    </div>

    <div class="position-menu">
      <div class="position-menu-item active game" data="1"><div class="position-menu-text">我的比赛调仓委托</div></div>
      <div class="clear"></div>
    </div>
    <div id="myPosition">
      <gj-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
        <div class="wrapper-lg text-center" v-show="dataList.length==0 && error!=''">{{error}}</div>
        <div class="pro-item bg-white" v-for="(item, index) in dataList" v-on:remove="dataList.splice(index,1)">
          <!--模板-->
          <!--v-for循环的结果-->
          <div class="pro-item-lable">
            <div class="pro-item-tip bg-gray">
              <div class="pro-item-tip-type bg-df text-xs"
                   :class="{'color-blue':item.trade_type=='0','color-red':item.trade_type=='1'}">
                {{item.trade_type=='0'? '卖出': '买入'}}
              </div>
              <div class="pro-item-tip-time m-l-sm">
                <i class="iconfont text-xs color-9">&#xe606;</i>
                <!--时钟icon-->
                <span class="color-9 text-xs m-l-xs">
								{{item.trade_time_str}}
							</span>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="text-center padder-v padder-sm">
            <div class="hbox" @click.stop.prevent="clickBox(item)">
              <div class="col" style="width: 25%;text-align: left;">
                <div class="text-md">{{item.stock_name}}</div>
                <div class="text-xs color-9">SH{{item.stock_code}}</div>
              </div>
              <div class="col">
                <div>{{item.trade_price}}</div>
                <div class="text-xs color-9">{{item.commission}}委托</div>
              </div>
              <div class="col">
                <div class="color-red liveStockPrice" stock-code="item.stock_code" market-cd="item.market_cd">
                  {{item.price}}
                </div>
                <div class="text-xs color-9">现价</div>
              </div>
              <div class="col" style="width: 22%;">
                <div>{{item.trade_count}}</div>
                <div class="text-xs color-9">数量</div>
              </div>
              <div class="col" style="vertical-align: bottom;" v-if="isYc == '1'">
                <img src="../../../assets/images/yicheng.png" style="width: 57px;" class="m-t-n-sm">
              </div>
              <div class="col" style="vertical-align: bottom;" v-else>
                <img :src="imgUrl(item)" style='width: 57px;' class='m-t-n-sm'>
              </div>
              <div class="col text-right" v-if="this.checkstatus==2" @click="cancle(item)">
                <span class="cancel-order-btn">撤单</span>
              </div>
            </div>
          </div>
          <div class="bg-f5 pro-item-yy padder-sm text-xs color-9" v-if="item.isReason==1">
            调仓原因
            <i class="iconfont" :class="item.reason1.reasonIcon" style="font-size: inherit" v-if="item.reason1">{{item.reason1.reasonText}}</i>
            <!--选择一个图标-->
            <i class="iconfont" :class="item.reason2.reasonIcon" style="font-size: inherit" v-if="item.reason2">{{item.reason2.reasonText}}</i>
            <i class="iconfont" :class="item.reason3.reasonIcon" style="font-size: inherit" v-if="item.reason3">{{item.reason3.reasonText}}</i>
          </div>
          <div class="bg-f5 pro-item-yy padder-sm text-xs color-9" v-else>
            暂无调仓原因
          </div>
        </div>
      </gj-loadmore>
      <!--<div id="myItemPosition" class="bg-white" style="top:93px;">
        </div>-->
    </div>
  </div>
</template>

<script>
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  export default {
    components: {
      /*子组件*/
      'gj-loadmore': LoadMore,
    },
    data() {
      return {
        userCode: '',//userCode: '127436',
        dataList: [],
        isYc: '0',
        start: 0,
        limit: 10,
        gameId: '',// gameId:'201703010070000801'
        message: '',
        error: ''
      }
    },
    created() {
      this.userCode = LocalDAO.getUserCode(); //取得用户ID
      //  进入页面直接请求渲染数据   this.menuFlag  永远等于1
    },
    beforeRouteEnter (to, from, next) {
      const {gameId = ''} = from.query
      if (!!gameId) {
        next(vm => {
          vm.$router.replace({path: to.path, query: Object.assign({}, to.query, {gameId})})
        })
      } else {
        next(vm => {
          vm.$router.replace({ path: to.path, query: Object.assign({}, to.query)})
        })
      }
    },
    beforeRouteUpdate (to, from, next) {
      const {gameId = ''} = to.query
      if (!!gameId) {
        this.gameId = gameId
        this.$route.query.gameId = gameId
      }
    },

    methods: {
      clickCheckBox() {
        //判断是否是选中状态
        if (this.isYc != "0") {
          this.isYc = "0"; //加载全部
          this.start = 0;
          this.dataList = [];
          this.$refs.loadmore.reset();
          //选中
        } else {
          //加载的已成订单
          this.isYc = '1';
          this.start = 0;
          this.dataList = [];
          this.$refs.loadmore.reset();
        }
      },
      //isYc 1只查已成，0查全部
      getPositionData(entrust_type, isYc) {
        this.error = ''
        var param = {
          "func_id": isYc && isYc == "1" ? '11117' : '11119',
          "client_id": this.userCode,
          "start": this.start,
          "limit": this.limit,
          "entrust_type": entrust_type,
          "entrust_typeid": this.gameId
        };
        if (isYc && isYc == "1") {
          //撤单和已成
          param.limit = param.limit - 1;
          RemoteDAO.callJCL11117OR11118(param, (resp) => {
            this.message = resp;
            resp = resp || {};
            if (resp.error == 0) {
              var records = resp.data.body.records || []
              this.render(records);
            } else {
              this.error = resp.data
            }
          });
        } else {
          //当日委托查询
          RemoteDAO.callJCL11119(param, (resp) => {
            this.message = resp;
            resp = resp || {};
            var records = resp.data.body.records || []
            this.render(records, 1);
          });
        }
      },
      render(records, show_type) {
        var vm = this;
        RemoteDAO.callGT1008(function (response) { //   取得系统的时间
          var date_now = "";
          if (response.error == "0") {
            date_now = response.data.body.date;
          } else {
            date_now = CommonUtil.getTodayFormatDate(); //  get date_now   得到了系统的时间
          }
          vm.formatData(records, show_type, date_now) //   there
        })
      },
      getLiveStockPrice(formatList) {
        var vm = this;
        var stock_codes = "";
        for (var i = 0; i < formatList.length; i++) {
          var stock_code = formatList[i].stock_code,
            marketCd = formatList[i].market_cd;
          stock_codes += (marketCd == 0 ? "SZ" : marketCd == 1 ? "SH" : "") + stock_code;
          if (i != formatList.length - 1) {
            stock_codes += "|";
          }
        }
        RemoteDAO.callNativeLiveStockPrice(stock_codes, function (resp) {
          vm.message = resp
          resp = resp || {};
          var list = resp.data || [];
          for (var i = 0; i < list.length; i++) {
            formatList[i].price = list[i].price
          }
        });
      },
      formatData(list, show_type, date_now) { //   进入块级作用域
        var formatList = [];
        for (var i = 0; i < list.length; i++) {
          var obj = list[i];
          var tempObj = {};
          tempObj.trade_no = obj.entrust_no; //委托标示
          tempObj.market_cd = obj.exchange_type; //市场标示
          tempObj.stock_code = obj.stock_code; //股票代码
          tempObj.stock_name = obj.stock_name; //股票名称
          var tradePrice = "", trade_count = "";tempObj.price = '';
          var isCj = ""; //1、显示委托价格 2、显示成交价格
          if (show_type == "1") {
            if (obj.entrust_status == "2" || obj.entrust_status == "3") {
              tradePrice = obj.business_price;
              trade_count = obj.business_vol;
              isCj = "2";
            } else {
              tradePrice = obj.entrust_price;
              trade_count = obj.entrust_vol;
              isCj = "1";
            }
          } else {
            tradePrice = obj.business_price;
            trade_count = obj.business_vol;
            isCj = "2";
          }
          tempObj.isCj = isCj
          tempObj.trade_price = tradePrice.toFixed(2); //成交价格
          tempObj.trade_count = trade_count; //成交数量
          tempObj.trade_type = CommonUtil.getBuyOrSellBuyType(obj.entrust_bs); //交易类型
          tempObj.commission = (obj.entrust_bs == 0 || obj.entrust_bs == 1) ? "限价" : "市价";
          tempObj.entrust_status = obj.entrust_status; //委托状态
          tempObj.create_date = CommonUtil.dateFormat(obj.create_date);
          tempObj.reason1 = CommonUtil.getReasonOption(obj.reason1);
          tempObj.reason2 = CommonUtil.getReasonOption(obj.reason2);
          tempObj.reason3 = CommonUtil.getReasonOption(obj.reason3);
          tempObj.isReason = 1; //原因默认不为空
          if (tempObj.reason1 == null && tempObj.reason2 == null && tempObj.reason3 == null) {
            tempObj.isReason = 0; //说明原因全部为空
          }
          var date = (show_type == "1" ? obj.entrust_date : obj.business_date).toString();
          var time = (show_type == "1" ? obj.entrust_time : obj.business_time).toString();
          var date_str = "";
          if (date == date_now) {
            date_str = "今天 ";
          } else {
            date_str = CommonUtil.formatDatePoint(date) + "";
          }
          time = time.length == 5 ? "0" + time : time;
          tempObj.trade_time_str = date_str + time.substring(0, 2) + ":" + time.substring(2, 4);
          formatList.push(tempObj);
        }
        this.dataList = this.dataList.concat(formatList);
        if(this.dataList.length ==0){
          this.error = '暂无数据'
          this.$refs.loadmore.onBottomError(); //无数据
        } else if (formatList.length < this.limit) {
          this.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
        } else {
          this.$refs.loadmore.onBottomLoaded(); //单次加载成功
          this.start += this.limit
        }
        if (formatList.length > 0) {
          this.getLiveStockPrice(formatList);
        }
      },
      imgUrl(item){
        var url = '';
        if (item.entrust_status == '0') {
          url = require('../../../assets/images/order-status0.png')
        } else if (item.entrust_status == '1') {
          url = require('../../../assets/images/order-status1.png')
        } else if (item.entrust_status == '2') {
          url = require('../../../assets/images/order-status2.png')
        } else if (item.entrust_status == '3') {
          url = require('../../../assets/images/order-status3.png')
        } else if (item.entrust_status == '4') {
          url = require('../../../assets/images/order-status4.png')
        } else if (item.entrust_status == '5') {
          url = require('../../../assets/images/order-status5.png')
        }
        return url;
      },
      loadTop() { /*下拉刷新*/
        setTimeout(()=> {
          this.start = 0;
          this.dataList = [];
          this.$refs.loadmore.reset();
          this.$refs.loadmore.onTopLoaded(); //上拉加载成功
        }, 1500)
      },
      loadBottom() { /*上拉加载*/
        if (this.isYc == '0') {
          this.getPositionData('3', '0')
        } else if (this.isYc == '1') {
          this.getPositionData('3', '1')
        }
      },
      clickBox(item) {
        var stockCode = item.stock_code;
        var exchangeType = item.market_cd;
        var marketCode;
        if (exchangeType == "0") {
          marketCode = "SZ";
        } else if (exchangeType == "1") {
          marketCode = "SH";
        }

        RemoteDAO.callStockLive(marketCode + stockCode, "ordinary", "1", function () {

        });
      }
    }
  }
</script>
<style scoped>
  .position-main .position-menu .game .position-menu-text{
    background: #F7743A !important;
  }

  .check-box{
    text-align: right;
    height: 25px;
    margin-bottom: 10px;
  }
</style>
